/* eslint-disable flowtype/require-valid-file-annotation,react/jsx-indent-props,react/forbid-prop-types,spaced-comment,react/jsx-first-prop-new-line,no-var,quotes,prefer-template */

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List, {ListItem, ListItemText, ListItemSecondaryAction} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from 'material-ui-icons/Menu';
import {mailFolderListItems, otherMailFolderListItems} from './tileData';
import AddIcon from 'material-ui-icons/Add';
import DeleteIcon from 'material-ui-icons/Delete';
import {AllUserList, LotteryUserList} from './list/UserList';
import Button from 'material-ui/Button';
import UserLists from './UserLists';


const drawerWidth = 580;

const AllListData = [
    {
        "userId": "123456789456789456E",
        "userName": "琴声悠扬TODO"
    },
    {
        "userId": "123456789456789456B",
        "userName": "小龙女Love"
    },
    {
        "userId": "123456789456789456A",
        "userName": "陆小凤ABCD"
    },
    {
        "userId": "123456789456789456G",
        "userName": "钟无艳TEST"
    },
];


const styles = theme => ({
    root: {
        width: '100%',
        height: 430,
        //TODO update by me
        // marginTop: theme.spacing.unit * 3,
        zIndex: 1,
        overflow: 'hidden',
    },
    appFrame: {
        position: 'relative',
        display: 'flex',
        width: '100%',
        height: '100%',
    },
    appBar: {
        position: 'absolute',
        marginLeft: drawerWidth,
        [theme.breakpoints.up('md')]: {
            width: `calc(100% - ${drawerWidth}px)`,
        },
    },
    navIconHide: {
        [theme.breakpoints.up('md')]: {
            display: 'none',
        },
    },
    drawerHeader: theme.mixins.toolbar,
    drawerPaper: {
        flexDirection: 'row',
        width: 580,
        [theme.breakpoints.up('md')]: {
            width: drawerWidth,
            position: 'relative',
            height: '100%',
        },
    },
    content: {
        backgroundColor: theme.palette.background.default,
        width: '100%',
        padding: theme.spacing.unit * 3,
        height: 'calc(100% - 56px)',
        marginTop: 56,
        [theme.breakpoints.up('sm')]: {
            height: 'calc(100% - 64px)',
            marginTop: 64,
        },
    },
});

class ResponsiveDrawer extends React.Component {
    state = {
        mobileOpen: false,
    };

    handleDrawerToggle = () => {
        this.setState({mobileOpen: !this.state.mobileOpen});
    };


    render() {
        const {classes, theme} = this.props;
        return (
            <div className={classes.root}>
                <div className={classes.appFrame}>
                    <AppBar className={classes.appBar}>
                        <Toolbar>
                            <IconButton
                                color="contrast"
                                aria-label="open drawer"
                                onClick={this.handleDrawerToggle}
                                className={classes.navIconHide}>
                                <MenuIcon/>
                            </IconButton>
                            <Typography type="title" color="inherit" noWrap>
                                在线抽奖
                            </Typography>

                            <div style={{marginRight: 'auto'}}/>


                            <Typography type="body1"
                                        color="inherit"
                                        style={{
                                            // marginLeft: 100,
                                            marginRight: 10,
                                        }}>
                                陆小凤940218
                            </Typography>
                            <Typography type="subheading"
                                        color="inherit"
                                        className={classes.navIconHide}
                                        style={{
                                            marginRight: 10,
                                        }}>
                                陆小凤940218
                            </Typography>
                            <Avatar alt="Remy Sharp"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509544359710&di=25450999c2f05ae282bd664cae78af1b&imgtype=0&src=http%3A%2F%2Fimg1.juimg.com%2F140928%2F330630-14092PP32456.jpg"
                            />

                        </Toolbar>
                    </AppBar>
                    <Hidden mdUp>
                        <Drawer
                            type="temporary"
                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                            open={this.state.mobileOpen}
                            classes={{
                                paper: classes.drawerPaper,
                            }}
                            onRequestClose={this.handleDrawerToggle}
                            ModalProps={{
                                keepMounted: true, // Better open performance on mobile.
                            }}
                        >


                            <UserLists data={AllListData} addType={false} itemClick={this.onListItemClickListener}/>
                            <AllUserList/>


                        </Drawer>
                    </Hidden>
                    <Hidden mdDown implementation="css">
                        <Drawer
                            type="permanent"
                            open
                            classes={{
                                paper: classes.drawerPaper,
                            }}
                        >
                            <LotteryUserList/>
                            <AllUserList/>

                        </Drawer>
                    </Hidden>
                    <main className={classes.content}>
                        <Typography type="body1" noWrap>
                            {'You think water moves fast? You should see ice.'}
                        </Typography>
                    </main>
                </div>
            </div>
        );
    }

    onListItemClickListener = (addType, v) => {
        console.log(addType + "; " + v);
    }
}

ResponsiveDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default withStyles(styles, {withTheme: true})(ResponsiveDrawer);